<template>
  <div class="sign-in-subscribe-wallet">
    <c-title text="钱包地址"></c-title>
    <div class="main">
      <div class="form">
        <span style="margin-right: 2.4rem;">钱包地址</span>
        <input v-model="address" type="text" placeholder="请输入钱包地址" />
      </div>
      <div class="form password">
        <div>
          <span style="margin-right: 2.4rem;">支付密码</span>
          <input v-model="password" :type="password_flag" placeholder="请输入支付密码" />
        </div>
        <div @click="password_switch">
          <img v-if="password_flag == 'text'" src="../../assets/images/view_password.png" style="width: 1.25rem;" />
          <img v-else src="../../assets/images/no_view_password.png" style="width: 1.25rem;" />
        </div>
      </div>
    </div>
    <van-button color="#F25C5C" size="large">更改</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: "",
      password: "",
      password_flag: 'password'
    }
  },
  methods: {
    password_switch() {
      if (this.password_flag == 'password') {
        this.password_flag = 'text'
      } else {
        this.password_flag = 'password';
      }

    }
  }
}

</script>

<style lang="scss" scoped>
.sign-in-subscribe-wallet {
  padding: 1.125rem 0.5625rem;

  .password {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  input {
    border: none;
  }

  .form {
    text-align: left;
  }

  .form:first-child {
    margin-bottom: 1.9375rem;
  }

  .main {
    background-color: #fff;
    color: #101010;
    border-radius: 0.3125rem;
    padding: 1.875rem 0.75rem 2rem 1.5rem;
    margin-bottom: 0.9375rem;
  }
}
</style>